﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:devlive="http://dev.live.com"> 
<head>
    <title>Try the Windows Live Spaces control</title>
 
    <script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/live.js"></script>
    <script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/controls.js"></script>    
    <style type="text/css">
        body {
            color:black;
            background-color:white;
            font-family:Verdana;
            font-size:12px;        
        }
        #SpacesControl {
            border:solid 1px black;
            float:right;
        }
        .myFooter {
            position:relative;
            left:0px;
            height:94px;
            width:100%;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='images/gradbottom.png');
            background:url(images/gradbottom.png) repeat-x;
        }
        .myFooter table {
            margin:30px 10px 0px 10px;
        }
        .myFooter a,
        .myFooter img,
        .myFooter td {
            font-size:10px;
            font-family:Verdana;
            color:#777;
            border:none;
        }
    </style>
    <script type="text/javascript">
        var _market = "en";
        
        function signin() {
            elDisplay.innerHTML = "You're logged in!";
        };
    
        function signout() {
            elDisplay.innerHTML = "You need to log in.";
        };

        function showerror(p_msg) {
            elDisplay.innerHTML = hescq(p_msg);
        }
    
        function setAttributes(){
            var s = document.location.href;
            var lang = elMarket.options[elMarket.selectedIndex].value;
            s = s.substr(0,s.length - document.location.hash.length) + 
                "#" + 
                encode(lang) +
                "&" +
                encode(hescq(elWidth.value)) +
                "&" + 
                encode(hescq(elHeight.value)) +
                "&" + 
                encode(hescq(elInnerBackgroundColor.value)) +
                "&" + 
                encode(hescq(elInnerTextColor.value)) +
                "&" + 
                encode(hescq(elOuterBackgroundColor.value)) +
                "&" + 
                encode(hescq(elOuterTextColor.value)) +
                "&" + 
                encode(hescq(elLinkColor.value));               
            document.location.replace(s);
            document.location.reload();
        }
        
        function genLanguageChoices() {
            if (!document.getElementById("SpacesControl").supportedMarkets) {
                setTimeout(genLanguageChoices, 500);
                return;
            }
            var i;
            var o = document.createElement("option");
            o.value = "";
            o.text = "(none)";
            if (window.ActiveXObject) {
                elMarket.add(o);
            } else {
                elMarket.add(o,null);
            }
            
            var languages = document.getElementById("SpacesControl").supportedMarkets();
            for (i in languages) {
                o = document.createElement("option");
                o.value = i;
                o.text = i;
		        if(document.getElementById("SpacesControl").getAttribute("devlive:market") == o.value){
		            o.selected = true;
		        }
                if (window.ActiveXObject) {
                    elMarket.add(o);
                } else {
                    elMarket.add(o,null);
                }
            }
            elMarket.value = _market;
        }

        Microsoft.Live.Platform.addEvent(window, "load", function () {setTimeout(genLanguageChoices, 500)});

        function resize() {
            elSpacesElement.style.width = hescq(elWidth.value.replace("px", "") + "px");
            elSpacesElement.style.height = hescq(elHeight.value.replace("px", "") + "px");
        }
        
        function receiveData(p_contacts) {
            var hash = window.location.hash;
            var s = "Done! " + p_contacts.length + " records received. <br>";
            for (var i = 0; i < p_contacts.length; i++) {
                s += "<p>";
                for (var j in p_contacts[i]) {
                    s += hescq(j) + ": <a target = '_BLANK' href = '" + hescq(p_contacts[i][j]) + "'>" + hescq(p_contacts[i][j]) + "</a><br>";
                }
                s += "</p>";
            }
            elDisplay.innerHTML = s;

            //Focus Display Element using bookmarks
            if (window.location.hash.length>0){                               
                window.location.replace(window.location.href.replace(window.location.hash,"#Display"));                
                //this is to ensure we do not go up if the hash was empty.
                if (hash != "#"){
                    //return the # value previously set so the user can do a refresh without losing the configuration
                    window.location.replace(window.location.href.replace("#Display",hash));
                }
            }
            else {                
                window.location.replace(window.location.href+"#Display");                
            }
            
        }
        

        function showControl() {
            var iX = hescq(elWidth.value.replace("px", ""));
    		var x = 0;
            expandControl();
            function expandControl() {
                if (x < iX) {
			        x = Math.min(x + 50, iX);
                    elSpacesElement.style.width = x + "px";
                    setTimeout(expandControl,50);
                }
            }
        }

        function hideControl() {
            var x = hescq(elWidth.value.replace("px", ""));
            shrinkControl();
            function shrinkControl() {
                if (x > 0) {
                    x = Math.max(x - 50, 0);
                    elSpacesElement.style.width = x + "px";
                    setTimeout(shrinkControl,50);
                }
            }
        }

        function toggleControl() {
            var iX = elSpacesElement.style.width.replace("px", "");
            if (iX <= 0) {
                showControl();
            } else {
                hideControl();
            }
        }

        function hescq(p_str) {
            return p_str.replace(/&/g,"&amp;").replace(/</g, "&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;").replace(/\'/g,"&apos;"); 
        }
        
        function encode(str) {
            if ("string" != typeof str) str = "";
            str = encodeURIComponent(str);
            return str.replace(/%/g, "\\"); /* hide '%' from browser (Firefox) */
        }

        function decode(str) {
            if ("string" != typeof str) str = "";
            str = str.replace(/\\/g, "%"); /* translate '\\' back to '%' */
            return decodeURIComponent(str);
        }
    </script>
</head>
<body onload='resize();'>

    <h2>Try the Windows Live Spaces control</h2>

    <devlive:spacescontrol 
        id="SpacesControl"
        devlive:privacyStatementURL="http://g.msn.com/2privacy/enus"
        devlive:market="en"
        devlive:dataDesired="fileExpiringURL,fileAccessControlledURL"
        devlive:onSignin="{ signin(); }"
        devlive:onSignout="{ signout(); }"
        devlive:onError="showerror"
        devlive:onData="receiveData"
        devlive:channelEndpointURL="channel.htm" 
    ></devlive:spacescontrol>

    <strong>Right click view source to see how all this is done - it's one page of javascript and html. </strong><br />
    
    <table style="display:inline">
        <tr>
            <td colspan=2>
                You don't need to give up a fixed area of your screen to the control, you can make it hide and show.<br />
                <input type="button" value="Hide and show the control" onclick="toggleControl();" />
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
         <tr>
            <td colspan=2>
                The drop down below shows you the currently supported languages. 
                Please choose one to see how the user interface changes in the control.
            </td>
        </tr>
        <tr>
            <td>
                <strong>Language/Market:</strong> 
            </td>
            <td>
                <select id="langPicker" onchange="setAttributes();">
                </select>
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
       <tr>
            <td colspan=2>
                By changing the width and height of the control, you can see how the user interface changes in the control. 
            </td>
        </tr>
        <tr>
            <td>
                <strong>Width:</strong>
            </td>
            <td>
                <input 
                    id="setWidth" 
                    style="width:6em;" 
                    onchange="resize();"/>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Height:</strong>
            </td>
            <td>
                <input 
                    id="setHeight" 
                    style="width:6em;" 
                    onchange="resize();"/>
            </td>
        </tr>
        <tr>
            <td colspan=2>&nbsp</td>
        </tr>
        <tr>
            <td colspan=2>
                The developer can specify color for areas in the control. The accepted format is #FFFFFF (hex), rgb(255,255,255), or one of aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow.
            </td>
        </tr>
        <tr>
            <td>
                <strong>Inner Background Color:</strong>
            </td>
            <td>
                <input id="innerBackgroundColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Inner Text Color:</strong>
            </td>
            <td>
                <input id="innerTextColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Outer Background Color:</strong>
            </td>
            <td>
                <input id="outerBackgroundColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Outer Text Color:</strong>
            </td>
            <td>
                <input id="outerTextColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Link Color:</strong>
            </td>
            <td>
                <input id="linkColor" type="text"></input>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input value="Set Colors" type="button" onclick="{ setAttributes(); }"></input>
            </td>
        <tr>        
        <tr>
            <td colspan=2>&nbsp</td>
        </tr> 
        <tr>
            <td colspan=2>
                The developer can write code that reacts to state changes in the control thru the various events.
            </td>
        </tr>        
        <tr>
            <td colspan=2>
                <strong>Status:</strong>
                <div id="Display" ></div>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var elSpacesElement = document.getElementById('SpacesControl');
        var elWidth = document.getElementById('setWidth');
        var elHeight = document.getElementById('setHeight');
        var elDisplay = document.getElementById('Display');
        var elMarket = document.getElementById('langPicker');
        var elInnerBackgroundColor = document.getElementById('innerBackgroundColor');
        var elInnerTextColor = document.getElementById('innerTextColor');
        var elOuterBackgroundColor = document.getElementById('outerBackgroundColor');
        var elOuterTextColor = document.getElementById('outerTextColor');
        var elLinkColor = document.getElementById('linkColor');

        elDisplay.innerHTML = "Initializing Spaces Control";
        
        //This will happen if someone hits refresh after displaying results.
        if (document.location.hash == "#Display"){
            document.location.href = document.location.href.replace("#Display","#");
        }

        if (document.location.hash.length > 1 && document.location.hash != "#Display") {
            var args = document.location.hash.substr(1).split('&');
            if (args.length == 8) {
                _market = hescq(decode(args[0]));
                elWidth.value = hescq(decode(args[1]));
                elHeight.value = hescq(decode(args[2]));
                elInnerBackgroundColor.value = hescq(decode(args[3]));
                elInnerTextColor.value = hescq(decode(args[4]));
                elOuterBackgroundColor.value = hescq(decode(args[5]));
                elOuterTextColor.value = hescq(decode(args[6]));
                elLinkColor.value = hescq(decode(args[7]));
                
                elSpacesElement.setAttribute("devlive:market", _market);   
                elSpacesElement.setAttribute("devlive:innerBackgroundColor", decode(args[3]));
                elSpacesElement.setAttribute("devlive:innerTextColor", decode(args[4]));
                elSpacesElement.setAttribute("devlive:outerBackgroundColor", decode(args[5]));
                elSpacesElement.setAttribute("devlive:outerTextColor", decode(args[6]));
                elSpacesElement.setAttribute("devlive:linkColor", decode(args[7]));
            }
        } else {
            elWidth.value = "200";
            elHeight.value = "300";
        }
    </script>

    <!-- Footer -->
    <div id="myFooter" class="myFooter">
        <table>
            <tr>
                <td style="width:90%">
                    <span style="margin-right: 12px;">&copy;2007 Microsoft Corporation</span>
                    <a target="_blank" href="http://g.msn.com/0PR_/enus">Privacy</a>&nbsp;|&nbsp;
                    <a target="_blank" href="http://g.msn.com/0TO_/enus">Legal</a>&nbsp;|&nbsp;
                    <a target="_blank" href="http://feedback.live.com/default.aspx?productkey=wldev&mkt=en-us">Feedback</a>
                </td>
                <td>
                    <a href="http://dev.live.com"><img src="http://dev.live.com/Themes/default/images/logo.gif" alt="Windows Live Dev" /></a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
